<template>
  <div class="content">
    <div class="query">
      <div style=" flex: 1;">
        <el-form ref="form" :model="detaliList" label-width="80px">
          <div style="display:flex;flex-wrap:wrap;">
            <div class="data" style="flex:1;margin-left: 20px;">
              <el-form-item label="登录时间:">
                <el-date-picker
                  clearable
                  v-model="detaliList.time"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
            <div style="flex:1;margin-left: 20px;">
              <el-form-item label="权限类型:">
                <el-select clearable v-model="detaliList.userType" placeholder="请选择">
                  <el-option
                    v-for="item in newTypeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="flex:1;margin-left: 20px;">
              <el-form-item label="是否封号:">
                <el-select clearable v-model="detaliList.isPower" placeholder="请选择">
                  <el-option
                    v-for="item in isPowerType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="flex:1;margin-left: 20px;">
              <el-form-item label="用户昵称:">
                <el-input v-model="detaliList.nickname"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="queryButton">
        <el-button @click="query" type="primary" style="position: absolute;bottom:22px;">
         <i class="el-icon-zoom-in"></i> 
          查询
        </el-button>
      </div>
    </div>

    <div class="tablecontent">
      <el-table
        v-loading="fullscreenLoading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          label="用户昵称"
          min-width="200"
          prop="nickname"
          align="center">
        </el-table-column>
        <el-table-column
          label="用户姓名"
          min-width="200"
          prop="username"
          align="center">
        </el-table-column>
        <el-table-column
          label="用户邮箱"
          min-width="200"
          prop="email"
          align="center">
        </el-table-column>
        <el-table-column
          label="用户权限"
          align="center"
          width="200">
          <template slot-scope="scope">
              {{scope.row.power?'管理员':'用户'}}
          </template>
        </el-table-column>
        <el-table-column
          label="注册时间"
          align="center"
          prop="regTime"
          width="200">
        </el-table-column>
        <el-table-column
          label="最后登录时间"
          align="center"
          prop="lastLoginTime"
          width="200">
        </el-table-column>
         <el-table-column
          label="是否封号"
          align="center"
          prop="isPower"
          width="200">
        </el-table-column>
        <el-table-column width="200" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin-right:10px;"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-popconfirm
                title="是否封号？"
                @confirm="handleDelete(scope.$index, scope.row,'是')"
                v-if="scope.row.isPower == '否'"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger">封号</el-button>
              </el-popconfirm>
              <el-popconfirm
                v-else
                title="是否解封？"
                @confirm="handleDelete(scope.$index, scope.row,'否')"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger">解封</el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top:10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="detaliList.number"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="detaliList.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
        v-loading="true"
        :modal-append-to-body="false"
        title="用户编辑"
        @close="beforeclose"
        :visible.sync="dialogVisible"
        width="500px">
        <el-form ref="formregister" :model="dialogform" :rules="registerrules">
          <el-form-item label="头像" v-if="beforeclose" label-width="100px" class="imgform" prop="user_pic">
            <div>
               <el-image
                  @click="$refs.imgfile.click()"
                  style="width:60px;height:60px;cursor: pointer;"
                  :src="dialogform.user_pic"
                  :fit="'fit'">
                </el-image>
            </div>
          </el-form-item>
          <el-form-item label="昵称" label-width="100px" prop="nickname">
            <el-input :disabled="true" placeholder="请输入昵称" v-model="dialogform.nickname"></el-input>
          </el-form-item>
          <el-form-item label="姓名" label-width="100px" prop="username">
              <el-input :disabled="true" placeholder="请输入姓名" type="text" v-model="dialogform.username"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="power" label-width="100px">
             <el-radio-group v-model="dialogform.power">
              <el-radio :label="0">用户</el-radio>
              <el-radio :label="1">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
           <el-form-item label="封号" prop="isPower" label-width="100px">
             <el-radio-group v-model="dialogform.isPower">
              <el-radio :label="'是'">已封号</el-radio>
              <el-radio :label="'否'">未封号</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="beforeclose">取 消</el-button>
          <el-button type="primary" @click="bianjiOK">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data(){
    return {
      dialogform:{
        _id:'',
        username:'',
        nickname:'',
        user_pic:'',
        power:'',
        isPower:''
      },
      registerrules:{},
      dialogVisible:false,
      total:0,
      fullscreenLoading:false,
      isPowerType:[
        {
          value:'是',
          lable:'是'
        },
        {
          value:'否',
          lable:'否'
        },
      ],
      newTypeoptions:[
        {
          value:'管理员',
          lable:'管理员'
        },
        {
          value:'用户',
          lable:'用户'
        },
      ],
      tableData: [],
      detaliList:{
        time:'',
        lastLoginTime:'',
        nickname:'',
        userType:'',
        isPower:'',
        page:10,
        number:1
      }
    }
  },
  mounted(){
    this.query()
  },
  methods:{
    beforeclose(){
      this.dialogVisible = false
      this.dialogform = {}
    },
    //完成编辑
    bianjiOK(){
      this.$refs['formregister'].validate((valid) => {
        if(valid){
          this.dialogform.uid = this.dialogform._id
          this.$http.post('/artcate/bianji_user',this.dialogform).then(res => {
            if(res.status == 0){
              this.dialogVisible = false
              this.query()
              this.$message({
                message: '保存成功！',
                type: 'success'
              });
            }else{
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          }).catch(err => {
            this.$message({
                message: err,
                type: 'error'
              });
          })
        }
      })
    },
    handleEdit(index,row){
      this.dialogVisible = true
      this.$http.post('/artcate/bianji_user_information',{uid:row._id}).then(res => {
            if(res.status == 0){
              this.dialogform = res.message[0]
            }else{
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          }).catch(err => {
            this.$message({
                message: err,
                type: 'error'
              });
          })
    },
    handleDelete(index,row,text){
      this.$http.post('/artcate/close_user',{uid:row._id,judge:text}).then(res => {
        if(res.status == 0){
          this.query()
          this.$message({
            message: text == '是'?'封号成功！':'已解封！',
            type: 'success'
          });
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.fullscreenLoading = false
        this.$message({
            message: err,
            type: 'error'
          });
      })
    },
    handleSizeChange(val){
      this.detaliList.number = 1
      this.detaliList.page = val
      this.query()
    },
    handleCurrentChange(val){
      this.detaliList.number = val
      this.query()
    },
    query(){
      this.tableData = []
      this.fullscreenLoading = true
      this.detaliList.power = this.detaliList.userType == ''?null:(this.detaliList.userType == '管理员'?1:0)
      let date = new Date(this.detaliList.time);
      this.detaliList.lastLoginTime = ''
      if(this.detaliList.time !== null && this.detaliList.time !== ''){
        this.detaliList.lastLoginTime = date.getFullYear() + '-' + 
        ((date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1)) + 
        '-' + (date.getDate()<10?'0'+date.getDate():date.getDate())
      }
      let data = {}
      for(let item in this.detaliList){
        if(this.detaliList[item] !== ''  && this.detaliList[item] !== null){
          data[item] = this.detaliList[item]
        }
      }
      this.$http.post('/artcate/user_manage',data).then(res => {
        this.fullscreenLoading = false
        if(res.status == 0){
          this.total = res.total
          this.tableData = res.message
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.fullscreenLoading = false
        this.$message({
            message: err,
            type: 'error'
          });
      })
    }
  }
}
</script>

<style scoped>
.content {
  height: 100%;
  width: 100%;
}
.query {
  font-weight: 600;
  padding:  22px 10px 10px 10px;
  background-color: white;
  display: flex;
  flex-wrap:wrap;
  height: 100%;
}
.queryButton{
  margin-left: 20px;
  width: 100px;
  position: relative;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 180px;
  height: 30px;
}
.tablecontent{
  padding: 10px;
  margin-top: 20px;
  background-color: white;
}
div /deep/ .el-table .el-table__cell {
    padding: 8px 0 !important;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
}
.query /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
}
.data /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 30px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
}
</style>